 
// banner图
.banner {
    position: relative;
    height: 470px;
    background: url('../image/banner3.png') no-repeat;
    background-size: 100% 100%;
    .banner_img{  
        position: absolute;
        left: 50%;
        transform: translate(-44%);
        height: 100%;
        width: 100%;
    }
}
// 消息通知栏 
.notification{ 
    color: #333;
    background: #f4f4f4;
    .noti_top{
        padding: 30px 20px;   
    }
    .noti_con{
        // height: 400px; 
        // 左侧
        .noti_con_fl{
            overflow: hidden;
        }
        .swiper_index{
            height: 464px;
        }
        // 右侧
        .noti_con_fr {
            padding-left: 10px;
            .noti_con_fr_li{
                // height: 50%;
                .noti_con_tit{ 
                    display: inline-block;
                    padding: 5px 10px;
                    margin: 10px 0;
                    background: #2cb88f;
                    color: #fff;
                    border-left: 4px solid #f25d0b;
                }
                .noti_con_list{
                    border-radius: 6px;
                    background: #fff;
                    .noti_con_item {
                        padding: 5px 0;
                        cursor: pointer;
                        p{
                            padding-right: 10px;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            width: 84%;
                        }
                    }
                }
            }
             
        }
    }
}
   
    // 地图区
    .report_map{ 
        margin-bottom: 20px;
        height: 400px;
        background: #fff;
        .report_map_tit{
            display: inline-block;
            padding: 5px 10px;
            margin: 10px 0;
            background: #2cb88f;
            color: #fff;
            border-left: 4px solid #f25d0b;
        } 
        .report_map_con {
            height: calc(100% - 54px);
            // 地图
            #map_container{
                margin: 0 10px;
                height: 100%; 
            }
            // 右侧输入
            .form{
                position: relative;
                span {
                    display: block;
                    margin-bottom: 10px;
                    margin-left: 20px;
                }
                input {
                    padding-left: 20px;
                    margin-left: 20px;
                    margin-bottom: 40px;
                    width: 80%;
                    height: 44px;
                    border-radius: 10px;
                }
                .search_result{
                    padding: 10px 20px;
                    position: absolute;
                    top: 190px;
                    width: 90%;
                    height: 300px; 
                    z-index: 10; 
                    .result_item{
                        padding-left: 20px;
                        height: 40px;
                        line-height: 40px;
                        background: #fff;
                        cursor: pointer;
                    }
                }
                .search_form {
                    margin-left: 20px;
                    width: 80%;
                    height: 44px;
                    line-height: 44px;
                    text-align: center;
                    color: #fff;
                    font-size: 18px;
                    background: #2EB88F;
                    border-radius: 10px;
                    cursor:pointer;
                }
            }
        } 
} 
.report_msg{
    padding-bottom: 40px;  
    .report_msg_tit{
        display: inline-block;
        padding: 5px 10px;
        margin: 10px 0;
        background: #2cb88f;
        color: #fff;
        border-left: 4px solid #f25d0b;
    }
    .report_msg_list{
        padding-left: 0;
        margin: 0; 
        .report_msg_item{
            margin-top: 23px;
            height: 150px; 
            .msg_item_img{
                height: 100%;
                border-radius: 5px;
            }
            .msg_item_info{
                padding-left: 20px;
                padding-right: 60px;
                 span {
                     overflow: hidden;
                     text-overflow:ellipsis;
                     white-space: nowrap;
                 }
                & span:nth-child(2){
                    display: block;
                    margin: 28px 0; 
                }
                p {
                 display: -webkit-box;
                 -webkit-box-orient: vertical;
                 -webkit-line-clamp: 2;
                 overflow: hidden;
                }
            }
        } 
    }
}
// 山脉风景
.mountain{
    margin: 10px 0;
    height: 520px; 
    .mountain_tit{
        padding: 20px 0;
        .tit_fl{
            display: inline-block;
            padding: 5px 10px;
            margin: 10px 0;
            background: #2cb88f;
            color: #fff;
            border-left: 4px solid #f25d0b;
        }
    }
    .swiper-container{
        height: 330px;
        .swiper-slide{ 
            position: relative;
            width: 30%;
            padding-right: 10px;
            .swiper-slide_img{
                width: 100%;
                height: 100%;
            }
            // 遮罩层
            .maskLayer{ 
                padding: 30px;
                position: absolute;
                top: 0; 
                width: 100%;
                text-align: center;
                height: 100%;
                opacity: 0.68;
                background: #2eb88f;
                // background-color: rgba( #2eb88f , 0 , 0 , .7)
                h3{
                    font-size: 22px;
                    color: #fff;
                }
                p{
                    color: #fff; 
                    line-height: 24px;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 10;
                    overflow: hidden; 
                }
            }
        }
        // 左右切换
        .swiper-button-next,
        .swiper-button-prev,
        .swiper-pagination-bullet {
            color: #f25d0b;
        }
        .swiper-pagination-bullet-active{
            background: #f25d0b;
        }
    }
}
// 山体详情
.mountain_deta{
    // height: 300px;
    margin-bottom: 20px; 
    .mountain_deta_fr,
    .mountain_deta_fl{
        .deta_fl{
            display: inline-block;
            padding: 5px 10px;
            margin: 10px 0;
            background: #2cb88f;
            color: #fff;
            border-left: 4px solid #f25d0b;
        }  
        .img_list,
        .mountain_deta_list {
            height: 82%;
            margin-bottom: 0;
            padding-left: 0;
            background: #fff;
            .deta_item_img{
                padding: 10px; 
            }
            .img_item{
                padding: 10px;
                height: 50%; 
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 5px;
                }
            }
        } 
        .deta_item_info{
            padding: 10px;
            color: #333;
            p{
                text-indent: 2em;
                height: 92px;
                overflow: hidden;
                text-overflow: ellipsis;
                display:-webkit-box; //作为弹性伸缩盒子模型显示。
                -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
                -webkit-line-clamp:4; //显示的行
            }
        }
}  
}
 
 